<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>所有行情 - OKX 数据展示</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <style>
        body {
            background-color: #f4f7fa;
            font-family: Arial, sans-serif;
        }
        .navbar {
            background-color: #0c2461;
        }
        .card {
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        .card-header {
            background-color: #0c2461;
            color: white;
            border-radius: 10px 10px 0 0;
            padding: 15px;
            font-weight: bold;
        }
        .ticker-row:hover {
            background-color: #f5f5f5;
        }
        .ticker-row .text-success {
            color: #2ed573 !important;
            font-weight: bold;
        }
        .ticker-row .text-danger {
            color: #ff4757 !important;
            font-weight: bold;
        }
        .loading {
            display: flex;
            justify-content: center;
            padding: 20px;
        }
        .refreshed-time {
            font-size: 12px;
            color: #6c757d;
            text-align: right;
            margin-top: 5px;
        }
        .connection-status {
            display: inline-block;
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <!-- 引入导航栏片段 -->
    <div th:replace="fragments/navbar :: navbar"></div>

    <div class="container">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span>所有行情</span>
                <div>
                    <select id="account-select" class="form-select form-select-sm d-inline-block" style="width: 200px;">
                        <option value="">-- 全部产品 --</option>
                        <option th:each="account : ${accounts}" 
                                th:value="${account.instId}" 
                                th:text="${account.accountName + ' (' + account.instId + ')'}">
                        </option>
                    </select>
                    <select id="inst-type-select" class="form-select form-select-sm d-inline-block ms-2" style="width: 150px;">
                        <option value="SWAP" selected>永续合约</option>
                        <option value="SPOT">现货</option>
                        <option value="FUTURES">交割合约</option>
                        <option value="OPTION">期权</option>
                    </select>
                    <span id="connection-status" class="badge bg-secondary ms-2">连接中...</span>
                </div>
            </div>
            <div class="card-body">
                <div class="alert alert-info">
                    <strong>所有行情数据</strong>：<span th:text="${pageDescription ?: '显示OKX交易所所有产品的实时行情数据，不限于产品管理表中的配置产品'}">显示OKX交易所所有产品的实时行情数据，不限于产品管理表中的配置产品。</span>
                    当前显示：<strong id="current-type">永续合约 (SWAP)</strong>，每5秒自动刷新。
                </div>

                <!-- 行情数据表格 -->
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>产品ID</th>
                                <th>最新价</th>
                                <th>24h涨跌幅</th>
                                <th>24h最高价</th>
                                <th>24h最低价</th>
                                <th>24h成交量(币)</th>
                                <th>买一价</th>
                                <th>卖一价</th>
                            </tr>
                        </thead>
                        <tbody id="tickersTableBody">
                            <tr>
                                <td colspan="8" class="text-center">正在加载数据...</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- 加载提示 -->
                <div id="loadingIndicator" class="loading d-none">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">加载中...</span>
                    </div>
                </div>

                <!-- 错误提示 -->
                <div id="errorAlert" class="alert alert-danger mt-3 d-none" role="alert">
                    连接断开或获取数据失败，正在尝试重新连接...
                </div>

                <div class="d-flex justify-content-between align-items-center mt-3">
                    <div id="nextUpdateIndicator" class="text-muted">
                        后端每15秒更新一次数据
                    </div>
                    <div class="refreshed-time">
                        最后更新时间: <span id="last-update-time">-</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer class="container mt-5">
        <hr>
        <p class="text-center text-muted">&copy; 2023 OKX 数据展示系统</p>
    </footer>

    <script th:src="@{/js/bootstrap.bundle.min.js}"></script>
    <script th:src="@{/js/sockjs.min.js}"></script>
    <script th:src="@{/js/stomp.min.js}"></script>
    <script>
        // CSRF令牌处理
        const csrfToken = document.cookie.replace(/(?:(?:^|.*;\s*)XSRF-TOKEN\s*\=\s*([^;]*).*$)|^.*$/, "$1");
        
        // 全局变量
        const connectionStatus = document.getElementById('connection-status');
        const loadingIndicator = document.getElementById('loadingIndicator');
        const errorAlert = document.getElementById('errorAlert');
        const tableBody = document.getElementById('tickersTableBody');
        const lastUpdateTime = document.getElementById('last-update-time');
        const accountSelect = document.getElementById('account-select');
        const instTypeSelect = document.getElementById('inst-type-select');
        let tickers = []; // 存储所有行情数据
        let stompClient = null;
        // 保存当前选择的产品ID和产品类型，用于在数据更新时保持过滤状态
        let currentSelectedInstId = '';
        let currentSelectedInstType = 'SWAP'; // 默认值
        let filteredTickers = []; // 保存过滤后的行情数据

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 连接WebSocket
            connect();
            
            // 添加产品类型选择事件
            instTypeSelect.addEventListener('change', function() {
                const selectedValue = this.value;
                console.log('产品类型选择变更为:', selectedValue);
                
                // 保存当前选择
                currentSelectedInstType = selectedValue;
                
                // 更新显示的产品类型文本
                updateProductTypeText(selectedValue);
                
                // 显示加载状态
                showLoading(true);
                showEmptyData('加载中', '正在获取' + selectedValue + '类型的行情数据...');
                
                // 清空当前数据
                tickers = [];
                
                // 清空过滤
                currentSelectedInstId = '';
                if (accountSelect) {
                    accountSelect.value = '';
                }
                
                // 更新最后刷新时间
                updateLastRefreshTime();
                
                // 请求新的数据
                fetchTickersByType();
            });
            
            // 添加账户选择事件
            accountSelect.addEventListener('change', function() {
                const selectedValue = this.value;
                console.log('产品选择变更为:', selectedValue);
                
                // 保存当前选择，即使为空字符串也保存
                currentSelectedInstId = selectedValue;
                
                // 显示加载状态
                showLoading(true);
                
                // 更新最后刷新时间
                updateLastRefreshTime();
                
                // 应用过滤
                applyFilter();
                
                // 如果是空值（全部产品），重新获取一次数据
                if (!selectedValue) {
                    fetchTickersByType();
                }
            });

            // 设置自动刷新定时器，每5秒刷新一次数据
            setInterval(function() {
                console.log('自动刷新行情数据');
                fetchTickersByType();
            }, 5000);
        });
        
        // 应用过滤条件
        function applyFilter() {
            console.log('应用过滤条件，当前选择产品:', currentSelectedInstId);
            
            if (!tickers || tickers.length === 0) {
                console.log('没有行情数据可供过滤');
                showEmptyData('无行情数据', '当前没有任何行情信息，或者正在加载数据...');
                return;
            }
            
            if (!currentSelectedInstId) {
                // 显示所有行情
                console.log('显示所有行情数据');
                filteredTickers = [...tickers]; // 复制整个数组
            } else {
                // 过滤特定产品的行情
                console.log('过滤产品ID:', currentSelectedInstId);
                filteredTickers = tickers.filter(ticker => ticker.instId === currentSelectedInstId);
                console.log('过滤后行情数量:', filteredTickers.length);
                
                // 如果过滤后没有数据，显示提示
                if (filteredTickers.length === 0) {
                    showEmptyData('无匹配数据', `产品 ${currentSelectedInstId} 没有行情数据`);
                    return;
                }
            }
            
            // 渲染过滤后的数据
            renderTickersTable(filteredTickers);
            
            // 每次过滤后更新时间
            updateLastRefreshTime();
        }
        
        // 显示空数据消息
        function showEmptyData(title, message) {
            tableBody.innerHTML = `
                <tr>
                    <td colspan="8" class="text-center">
                        <h5>${title}</h5>
                        <p>${message}</p>
                    </td>
                </tr>
            `;
        }

        // 建立WebSocket连接
        function connect() {
            connectionStatus.textContent = '连接中...';
            connectionStatus.className = 'badge bg-warning';

            // 显示加载中状态
            showLoading(true);
            hideError();

            try {
                let socket = new SockJS('/ws');
                stompClient = Stomp.over(socket);

                // 禁用debug日志
                stompClient.debug = null;

                stompClient.connect({}, function(frame) {
                    // 连接成功
                    connectionStatus.textContent = '已连接';
                    connectionStatus.className = 'badge bg-success';

                    // 订阅行情数据主题
                    stompClient.subscribe('/topic/all-markets', function(response) {
                        console.log('WebSocket收到行情数据');
                        try {
                            // 保存原始数据
                            const newTickers = JSON.parse(response.body);
                            console.log('行情数据总数:', newTickers.length, '条');
                            
                            // 检查收到的数据类型是否与当前选择的类型匹配
                            if (newTickers.length > 0) {
                                const receivedInstType = newTickers[0].instType;
                                console.log('收到产品类型:', receivedInstType, '当前选择:', currentSelectedInstType);
                                
                                if (receivedInstType === currentSelectedInstType) {
                                    console.log('数据匹配当前选择类型，更新数据');
                                    tickers = newTickers;
                                    
                                    // 应用当前的过滤条件
                                    applyFilter();
                                    
                                    // 更新最后更新时间
                                    updateLastRefreshTime();
                                } else {
                                    console.log('忽略不匹配的数据类型:', receivedInstType);
                                }
                            } else {
                                console.log('收到空数据，仍然进行更新');
                                tickers = newTickers;
                                applyFilter();
                                updateLastRefreshTime();
                            }
                            
                            showLoading(false);
                        } catch (error) {
                            console.error('处理行情数据失败:', error);
                            showError();
                        }
                    });

                    console.log('Connected: ' + frame);
                    
                    // 连接成功后立即获取数据
                    fetchTickersByType();
                }, function(error) {
                    // 连接失败
                    connectionStatus.textContent = '连接失败';
                    connectionStatus.className = 'badge bg-danger';
                    showError();

                    console.error('Connection error: ' + error);
                    // 通过HTTP API获取数据
                    fetchTickersByType();
                    // 5秒后重新尝试连接
                    setTimeout(connect, 5000);
                });
            } catch (e) {
                console.error('WebSocket连接异常:', e);
                connectionStatus.textContent = '连接失败';
                connectionStatus.className = 'badge bg-danger';
                showError();
                
                // 通过HTTP API获取数据
                fetchTickersByType();
                // 10秒后重新尝试连接
                setTimeout(connect, 10000);
            }
        }

        // 渲染行情表格
        function renderTickersTable(tickers) {
            if (!tickers || tickers.length === 0) {
                showEmptyData('无匹配数据', '没有找到相关行情数据');
                return;
            }

            tableBody.innerHTML = '';

            // 排序 - 按成交量降序
            tickers.sort((a, b) => {
                const volA = Number(a.volCcy24h || 0);
                const volB = Number(b.volCcy24h || 0);
                return volB - volA;
            });

            tickers.forEach(ticker => {
                // 计算24h涨跌幅
                const lastPrice = Number(ticker.last || 0);
                const openPrice = Number(ticker.open24h || 0);
                let priceChange = 0;
                let priceChangeClass = '';

                if (openPrice > 0) {
                    priceChange = ((lastPrice - openPrice) / openPrice * 100).toFixed(2);
                    priceChangeClass = priceChange > 0 ? 'text-success' : (priceChange < 0 ? 'text-danger' : '');
                }

                const row = document.createElement('tr');
                row.className = 'ticker-row';
                row.innerHTML = `
                    <td>${ticker.instId}</td>
                    <td>${ticker.last || '-'}</td>
                    <td class="${priceChangeClass}">${priceChange}%</td>
                    <td>${ticker.high24h || '-'}</td>
                    <td>${ticker.low24h || '-'}</td>
                    <td>${ticker.volCcy24h || '-'}</td>
                    <td>${ticker.bidPx || '-'}</td>
                    <td>${ticker.askPx || '-'}</td>
                `;
                tableBody.appendChild(row);
            });
        }

        // 显示/隐藏加载中提示
        function showLoading(show) {
            if (show) {
                loadingIndicator.classList.remove('d-none');
            } else {
                loadingIndicator.classList.add('d-none');
            }
        }

        // 显示错误提示
        function showError() {
            errorAlert.classList.remove('d-none');
        }

        // 隐藏错误提示
        function hideError() {
            errorAlert.classList.add('d-none');
        }

        // 更新最后刷新时间
        function updateLastRefreshTime() {
            const now = new Date();
            const timeStr = now.toLocaleString();
            lastUpdateTime.textContent = timeStr;
            console.log('更新最后刷新时间:', timeStr);
        }

        // 根据产品类型获取行情
        function fetchTickersByType() {
            console.log('获取产品类型行情:', currentSelectedInstType);
            showLoading(true);
            
            // 清空当前选择的产品ID，因为产品类型变了
            if (currentSelectedInstId) {
                currentSelectedInstId = '';
                if (accountSelect) {
                    accountSelect.value = '';
                }
            }
            
            // 先清空现有数据，防止界面延迟
            tickers = [];
            showEmptyData('加载中', '正在获取' + currentSelectedInstType + '类型的行情数据...');
            
            // 直接使用API获取数据，不再通过WebSocket
            const apiUrl = `/api/tickers?instType=${currentSelectedInstType}`;
            
            fetch(apiUrl)
                .then(response => response.json())
                .then(data => {
                    console.log('API获取行情数据:', data.length, '条');
                    tickers = data;
                    
                    // 应用当前的过滤条件
                    applyFilter();
                    
                    // 更新最后刷新时间
                    updateLastRefreshTime();
                    
                    showLoading(false);
                    
                    // 更新产品类型显示
                    updateProductTypeText(currentSelectedInstType);
                })
                .catch(error => {
                    console.error('获取行情数据失败:', error);
                    showError();
                    showEmptyData('获取数据失败', '无法从服务器获取行情信息，请稍后再试...');
                });
        }

        // 更新显示的产品类型文本
        function updateProductTypeText(selectedValue) {
            const currentType = document.getElementById('current-type');
            currentType.textContent = selectedValue.charAt(0).toUpperCase() + selectedValue.slice(1) + ' (' + selectedValue + ')';
        }
    </script>
</body>
</html>
